<script setup lang="ts">
import GroupBox from '@/components/GroupBox/GroupBox.vue'
</script>

<template>
  <div class="c-l c-box">
    <GroupBox pName="l-box" transition="left">
      <template #title> 这是模块标题 </template>
      <template #first>
        <div style="height: 200px; background-color: rgb(255, 0, 0)">
          模块图表 1
        </div>
        <div style="height: 200px; background-color: rgb(38, 255, 0)">
          模块图表 1
        </div>
      </template>
      <template #second>
        <div style="height: 2000px; background-color: #eee">1111</div>
      </template>
    </GroupBox>
  </div>
  <div class="c-r c-box">
    <GroupBox pName="r-box" transition="right">
      <template #title> 这个是个标题 RRRRR </template>
      <template #first>
        <div style="height: 200px">200</div>
        <div style="height: 200px">200</div>
      </template>
      <template #second>
        <div style="height: 2000px; background-color: #000">1111</div>
      </template>
    </GroupBox>
  </div>
</template>

<style lang="scss" scoped>
.c-box {
  position: fixed;
  top: 75px;
  width: calc(25vw - 40px);
  height: calc(100vh - 75px);
  overflow: scroll;
  z-index: 10;
  &.c-l {
    left: 0;
    padding: 0 20px;
  }
  &.c-r {
    right: 0;
    padding: 0 20px;
  }
}
</style>
